<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式绿色环保</title>
    <style>
        *:after,*:before{
            box-sizing: inherit;
        }
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        ul,li{
            list-style-type: none;
        }
        body{
            width: 100%;
            background-color: #fff;
            font-family: 'Roboto Slab',serif;
        }
        a{
            text-decoration: none;
            transition: 0.5s all;
        }
        img{
            max-width: 100%;
            height: auto;
            width: auto;
            vertical-align: middle;
        }
        .clearfix{
            clear: both;
        }
        .container{
            margin: 0 auto;
            padding: 0 15px;
            width: 100%;
        }
        .header{
            width: 100%;
            background: white;
            padding: 33px 0;
            position: relative;
        }
        nav ul li{
            margin: 0 35px;
            display: inline-block;
        }
        nav ul li a{
            color: #000;
            font-size: 1.25em;
            font-weight: 500;
        }
        nav ul li a:hover,nav ul li a:active{
            color: #999;
        }
        nav input[type="checkbox"],menu{
            position: absolute;
            left: 2%;
            top: 10px;
            display: none;
        }
        .logo{
            position: absolute;
            right: 10%;
            top:0%;
        }
        .banner{
            width: 100%;
            background: url("图片/屏幕截图\ 2024-04-10\ 142423.png") no-repeat center center;
            background-size:cover;
            min-height: 540px;
        }
        @media screen and (max-width:575px) {
            .header{
                padding: 25px 0;
            }
            .menu{
                display: block;
                cursor: pointer;
            }
            nav>ul{
                display:none;
            }
            nav input[type="checkbox"]:checked~ul{
                display: block;
            }
            nav ul li {
                width: 100%;
                display: inline-block;
                text-align: center;
                margin: 0;
                padding: 0;
            }
            nav ul li a{
                display: block;
                margin: 10px 0;
            }
            .logo{
                width: 17%;
                right: 4%;
            }
            .banner{
                min-height: 200px;
            }
            .mission{
                padding: 20px 0;
            }
            .mission-container{
                margin-top: 15px;
            }
            .mission-header h3{
                font-size: 1.25em;
            }
            .mis-right h3{
                font-size: 1em;
            }
            .mission-left,.mission-right{
                padding: 0;
                float: left;
                width: 100%;
            }
            .mission-right{
                margin: 30px 0 0 0;
            }
            .mis-left{
                width: 13%;
                margin-top: 3px;
            }
            .mis-right{
                width: 82%;
            }
            .mis-right p{
                margin: 10px 0 0 0;
            }
            .mis-one{
                margin-bottom: 24px;
            }
            .mis-one:nth-child(3){
                margin: 0;
            }
            .footer P{
                margin: 0 0 20px 0;
            }
        }
        @media screen and  (min-width:576px){
            nav>ul li{
                margin: 0 10px;
            }
            .logo{
                width: 18%;
                right: 4%;
            }
        }
        @media screen and (min-width:768px) {
            .header{
                padding: 24px 0;
            }
            .logo{
                right: 6%;
                width: 13%;
            }
            nav>ul li{
                margin: 0 20px;
            }
            nav>ul li a{
                font-size: 1.1em;
            }
            .mission_div{
                padding: 0 5px;
            }
            .mis-right p{
                margin-top: 2px;
            }
            .mis-one{
                margin-bottom: 0.5rem;
            }
        }
        @media screen and (min-width:992px) {
            nav>ul li{
                margin: 0 35px;
            }
            nav>ul li a{
                font-size: 1.25em;
            }
            .mission_div{
                padding: 0 15px;
            }
            .mis-right p{
                margin-top: 10px;
            }
            .mis-one{
                margin-bottom: 1.8rem;
            }
        }
        @media screen and (min-width:1200px) {
            nav>ul li{
                margin: 0 40px;
            }
        }
        .mission{
            background: #fbffec;
            padding: 60px 0;
        }
        .mission-header h3{
            font-family: "Droid Serif",serif;
            font-size: 2em;
            color: #159400;
            text-align: center;
        }
        .mission-container{
            margin-top: 35px;
        }
        .mission-left{
            width: 50%;
            float: left;
            position: relative;
            min-height: 1px;
            padding: 0 15px;
        }
        .mission-right{
            width: 50%;
            float: right;
            position: relative;
            min-height: 1px;
            padding: 0 15px;
        }
        .mission-left img{
            width: 100%;
        }
        .mis-one{
            margin-bottom: 2rem;
        }
        .mis-left{
            width: 15%;
            float: left;
        }
        .mis-left img{
            width: 100%;
        }
        .mis-right{
            width: 82%;
            float: right;
        }
        .mis-right h3{
            font-size: 1.25em;
            color: #7ddf6c;
        }
        .mis-right p{
            font-size: 0.875em;
            color: #000;
            line-height: 1.8em;
            margin: 12px 0 0 0;
        }
        .footer{
            padding: 18px 0;
            background: #000;
        }
        .footer p{
            margin: 9px 0 0 0;
            font-size: 0.875em;
            color: #fff;
            text-align: center;
        }
        .footer p a{
            color: #fff;
        }
        .footer p a:hover,.footer p a.active{
            color: #000;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <nav>
                <input type="checkbox" id="togglebox">
                <ul>
                    <li><a class="active" href="Untitled-2.html">首页</a></li>
                    <li><a href="javascript:;">分类方法</a></li>
                    <li><a href="javascript:;">分类指南</a></li>
                    <li><a href="javascript:;">关于我们</a></li>
                    <li><a href="javascript:;">联系我们</a></li>
                </ul>
            </nav>
            <label class="menu" for="togglebox">
                <img src="实验3—环保网站/images/menu.png">
            </label>
            <div class="logo">
                <a href="Untitled-2.html"><img src="图片//图片1.jpg"></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="banner"></div>
    <div class="mission">
        <div class="container">
            <div class=" mission-header">
                <h3>我们的宗旨</h3> 
            </div>
            <div class="mission-container">
                <div class="mission_div mission-left">
                    <img src="图片/微信图片_20240423200121.jpg" alt=""/>
                </div>
                <div class="mission_div mission-right">
                    <div class="mis-one">
                        <div class="mis-left">
                            <img src="图片/微信图片_20240423200121.jpg" alt=""/>
                        </div>
                        <div class="mis-right">
                            <h3>荔枝</h3>
                            <p>liz</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="mis-one"> 
                        <div class="mis-left">
                            <img src="图片/微信图片_20240410141735.jpg" alt=""/>
                        </div>
                        <div class="mis-right">
                            <h3>荔枝</h3>
                            <p>LIZ</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="mis-one"> 
                        <div class="mis-left">
                            <img src="图片/微信图片_20240410141735.jpg" alt=""/>
                        </div>
                        <div class="mis-right">
                            <h3>荔枝</h3>
                            <p>LIZ</p>
                        </div>
                        <div class="clearfix"></div>                 
                    </div>   
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <p>liz链接<a href="#">购买</a></p>
            <div class="clearfix"></div>
        </div>
    </div>
</body>
</html>